<template>
  <div class="todolist">
    <div class="box">todolist列表</div>
    <div class="add">
      <input
        class="ipt"
        type="text"
        v-model="todoTitle"
        @keyup.enter="addTodo"
        placeholder="请输入任务标题"
      />
      <button @click="addTodo" class="btn">新增任务</button>
    </div>
    <h2 class="text1">
      正在进行 <span>{{ activeLen }}</span>
    </h2>
    <ul v-if="todoLists.length !== 0">
      <li v-for="item in activeTodoListRef" :key="item.id">
        <input type="checkbox" v-model="item.completed" />
        <input
          @focus="editorTodo(item)"
          @keyup.esc="cancelEditor(item)"
          type="text"
          v-model="item.title"
        />

        <a href="javascript:void(0)" @click="delTodo(item)">删除</a>
      </li>
    </ul>

    <h2 class="text2">
      已经完成 <span>{{ completedLen }}</span>
    </h2>

    <ul v-if="todoLists.length !== 0">
      <li v-for="item in finishedTodoListRef" :key="item.id">
        <input type="checkbox" v-model="item.completed" />

        <input
          @focus="editorTodo(item)"
          @keyup.esc="cancelEditor(item)"
          type="text"
          v-model="item.title"
        />

        <a href="javascript:void(0)" @click="delTodo(item)">删除</a>
      </li>
    </ul>
    <button @click="alldel" class="btn1">全部删除</button>
  </div>
</template>
<script>
import todoList from "./components/todoLists";
import aaa from "./components/newTodo";
import filterTodo from "./components/filterTodo";
import editorTodo from "./components/editorTodo";
import removeTodo from "./components/removeTodo";
export default {
  data() {
    return {};
  },
  methods: {
    alldel() {
      localStorage.clear();
      window.location.reload();
    },
  },
  setup() {
    let { todoLists } = todoList();
    return {
      todoLists,
      ...aaa(todoLists), //解构运算符  todotitle,addTodo
      ...filterTodo(todoLists),
      ...editorTodo(todoLists),
      ...removeTodo(todoLists),
    };
  },
};
</script>
<style scoped>
.btn1 {
  margin-top: 50px;
  width: 100px;
  height: 50px;
  background-color: red;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  border-radius: 10px 10px 10px 10px;
}
.box {
  background-color: black;
  color: #fff;
  height: 50px;
  text-align: center;
  line-height: 50px;
  width: 100%;
  font-size: 30px;
}
.text1 {
  color: dodgerblue;
}
.text2 {
  color: darkgreen;
}
.todolist {
  margin: 0;
  padding: 0;
  text-align: center;
}
.add {
  margin: 60px;
  padding-left: 60px;
}
.ipt {
  width: 300px;
  height: 30px;
}
.btn {
  width: 90px;
  height: 36px;
}
a {
  color: #000000;
  text-decoration: none;
  margin: 10px;
}
a:hover {
  color: #f40;
}
a.active {
  color: #f40;
}
li {
  list-style-type: none;
}
</style>